<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<style>

    * {
        margin: 0;
        padding: 0;
    }

    li {
        list-style: none;
    }

    .box {
        width: 800px;
        height: 400px;
        margin: 100px auto;
        background-color: rgb(97, 67, 67);
    }

    .top {
        height: 350px;
        background-image: url(./../img/1.jpg);
        background-size: cover;
    }

    .box .button p {
        margin-left: 10px;
        font-size: 14px;
        color: white;
    }

    .button ul {
        display: flex;
        justify-content: start;
        margin-left: 10px;
        margin-top: 10px;
    }

    .button ul li {
        width: 10px; /* 点的宽度 */
        height: 10px; /* 点的高度 */
        background-color: white; /* 点的颜色 */
        border-radius: 50%; /* 圆形 */
        margin: 0 5px; /* 点之间的间距 */
        cursor: pointer; /* 鼠标悬停时显示为可点击 */
    }

    .title {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    button {
        background-color: rgb(97, 67, 67);
    }

    button:nth-child(2) {
        margin-left: auto;
    }
</style>

<body>


<div class="box">
    <div class="top"></div>
    <div class="button">
        <div class="title">
            <p>我想要天上的月亮和地上的霜</p>
            <button class="left-btn"><</button>
            <button class="right-btn">></button>
        </div>

        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<script>
    const info_data = [
        {id: 1, title: '我想要天上的月亮', img: '1.jpg'},
        {id: 2, title: '上天不会辜负每一个努力向前的人', img: '2.jpg'},
        {id: 3, title: '天道酬勤', img: '3.jpg'},
        {id: 4, title: '加油,相信自己永远是最棒的', img: '4.jpg'},
        {id: 5, title: '永远积极向上,永远热泪盈眶', img: '5.jpg'},
        {id: 6, title: '谋事在人,成事在天', img: '6.webp'},
        {id: 7, title: '梦醒推门,她仍在研磨', img: '7.webp'}
    ]

    const element = document.querySelector('.top')
    let randomIndex = Math.floor(Math.random() * (info_data.length))

    const allDots = document.querySelectorAll('ul li');
    const paragraphElement = document.querySelector('p')

    function startInterval() {
        return setInterval(function () {
            if (randomIndex === info_data.length - 1) {
                randomIndex = 0
            } else {
                randomIndex++
            }
            updateDisplay()
        }, 1500)
    }


    const leftBtn = document.querySelector('.left-btn');
    leftBtn.addEventListener('click', function () {
        allDots.forEach(dot => {
            dot.style.backgroundColor = 'white';
        })
        if (randomIndex === 0) {
            randomIndex = info_data.length - 1
        } else {
            randomIndex--
        }
        element.style.backgroundImage = `url(./../img/${info_data[randomIndex].img})`
        paragraphElement.innerText = info_data[randomIndex].title

        const element1 = document.querySelector(`ul li:nth-child(${randomIndex + 1})`);
        element1.style.backgroundColor = 'red'
    })

    const rightBtn = document.querySelector('.right-btn');
    rightBtn.addEventListener('click', function () {
        allDots.forEach(dot => {
            dot.style.backgroundColor = 'white';
        })
        if (randomIndex === info_data.length - 1) {
            randomIndex = 0
        } else {
            randomIndex++
        }

        element.style.backgroundImage = `url(./../img/${info_data[randomIndex].img})`
        paragraphElement.innerText = info_data[randomIndex].title

        const element1 = document.querySelector(`ul li:nth-child(${randomIndex + 1})`);
        element1.style.backgroundColor = 'red'
    })

    function updateDisplay() {
        paragraphElement.innerText = info_data[randomIndex].title;
        element.style.backgroundImage = `url(./../img/${info_data[randomIndex].img})`;

        allDots.forEach(dot => {
            dot.style.backgroundColor = 'white';
        });
        const ele = document.querySelector(`ul li:nth-child(${randomIndex + 1})`);
        ele.style.backgroundColor = 'red';
    }


    let number = startInterval();

    leftBtn.addEventListener('mouseenter', function () {
        clearInterval(number)
    })
    leftBtn.addEventListener('mouseleave', function () {
        number = startInterval()
    })

    rightBtn.addEventListener('mouseenter', function () {
        clearInterval(number)
    })
    rightBtn.addEventListener('mouseleave', function () {
        number = startInterval()
    })

</script>
</body>
</html>